<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>登录界面</title>
    <!-- 引入CSS样式表 -->
    <link href="/css/login.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .password-container {
            position: relative;
        }

        .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>用户登录</h2>
        <form id="loginForm" action="http://localhost:8080/login" method="POST" onsubmit="return handleFormSubmit(event)">
            <label for="username">用户名:</label>
            <input id="username" name="username" required type="text">
            <br><br>
            <label for="password">用户密码:</label>
            <div class="password-container">
                <input id="password" name="password" required type="password">
                <i class="fas fa-eye toggle-password" onclick="togglePasswordVisibility('password')"></i>
            </div>
            <br><br>
            <span id="error-message" style="color: red;"></span>
            <br><br>
            <button type="submit">登录</button>
            <a href="http://localhost:8080/register">注册</a>
        </form>
    </div>
    <script>
        function handleFormSubmit(event) {
            event.preventDefault(); // 阻止表单默认提交

            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            var errorMessage = document.getElementById("error-message");

            // 清除之前的错误消息
            errorMessage.innerText = "";

            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "http://localhost:8080/login", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            // 处理响应
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        window.location.href = "/index";
                    } else if (xhr.status === 401) {
                        errorMessage.innerText = "用户名或密码错误";
                    } else {
                        errorMessage.innerText = "登录失败，请重试";
                    }
                }
            };

            // 发送请求
            xhr.send("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
        }

        function togglePasswordVisibility(id) {
            var passwordField = document.getElementById(id);
            var passwordFieldType = passwordField.type === 'password' ? 'text' : 'password';
            passwordField.type = passwordFieldType;
            var toggleIcon = passwordField.nextElementSibling;
            toggleIcon.classList.toggle('fa-eye');
            toggleIcon.classList.toggle('fa-eye-slash');
        }

        document.getElementById("password").addEventListener("input", function() {
            document.getElementById("error-message").innerText = "";
        });

        document.getElementById("username").addEventListener("input", function() {
            document.getElementById("error-message").innerText = "";
        });
    </script>
</body>
</html>
